<div class="box box-primary">
    <!--功能栏Begin-->
    <div class="box-header">
        <h3 class="box-title">收款银行账号管理</h3>
    </div>
    <!--功能栏End-->
    <div class="box box-body no-margin no-border-top">
        <!--查询条件Begin-->
        <form class="form-inline form-group">
            <div class="form-group">
                <label for="c_fund_code">组合代码：</label>
                <input type="text" class="form-control tfi-search-input" id="c_fund_code" name="c_fund_code" [(ngModel)]="searchBody.c_fund_code">
            </div>
            <div class="form-group">
                <label for="vc_fund_name">组合名称：</label>
                <input type="text" class="form-control tfi-search-input" id="vc_fund_name" name="vc_fund_name" [(ngModel)]="searchBody.vc_fund_name">
            </div>       
            <div class="form-group">
                <label for="c_pay_type">业务类型：</label>
                <select class="form-control tfi-search-input" id="c_pay_type" name="c_pay_type" style="width:68%" [(ngModel)]="searchBody.c_pay_type">
                    <option></option>
                    <option value="XGSG_SQ_IPO_SH">新股申购-上海</option>
                    <option value="XGSG_SQ_IPO_SZ">新股申购-深圳</option>
                    <option value="ZJHH_DVP_SQS_TC">调出DVP账户（上清所）</option>
                    <option value="ZJHH_DVP_SQS_TR">调入DVP账户（上清所）</option>
                    <option value="ZJHH_DVP_ZZ_TC">调出DVP账户（中债） </option>
                    <option value="ZJHH_DVP_ZZ_TR">调入DVP账户（中债）</option>
                </select>
            </div>
            <div class="form-group search-btn-container max">
                <button type="button" class="btn btn-primary" (click)="search()">查询</button>
                <button type="button" class="btn btn-warning" (click)="resetSearch()">重置</button>
            </div>
        </form>
        <div class="form-group">
            <button type="button" class="btn btn-primary" (click)="openCommonModal('add')">新增</button>
            <button type="button" class="btn btn-danger" (click)="deleteAccountConfig()">删除</button>
        </div>
        <!--查询条件end-->
        <!--划款指令列表Begin-->
        <div class="table-scroll-content">
            <table class="table table-bordered table-hover table-striped table-keep-line">
                <thead>
                    <tr>
                        <th><input type="checkbox" [(ngModel)]="isCheckedAll" (ngModelChange)="checkedAll()"></th>  
                        <th>组合代码</th>
                        <th>组合名称</th>
                        <th>业务类型</th>
                        <th>付款行名称</th>
                        <th>付款行账号</th>
                        <th>付款行户名</th>
                        <th>付款行大额支付号</th>
                        <th>收款行名称</th>
                        <th>收款行账号</th>
                        <th>收款行户名</th>
                        <th>收款行地址</th>
                        <th>收款行大额支付号</th>
                        <th>用途</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr *ngFor="let item of accountList;let i = index;" [attr.data-index]="i">
                        <td>
                            <div class="cell">
                                <input type="checkbox" name="item.c_fund_code" [(ngModel)]="item.isChecked" (ngModelChange)="checked(item)">
                            </div>
                        </td>
                        <td>
                            <!-- 组合代码 -->
                            {{item.c_fund_code}}
                        </td>
                        <td>
                            <!-- 组合名称 -->
                            {{item.vc_fund_name}}
                        </td>
                        <td>
                            <!-- 业务类型 -->
                            {{item.c_hk_name}}
                        </td>
                        <td>
                            <!-- 付款行名称 -->
                            {{item.c_payaccount_bank}}
                        </td>
                        <td>
                            <!-- 付款行账号 -->
                            {{item.c_payaccount}}
                        </td>
                        <td>
                            <!-- 付款行户名 -->
                            {{item.c_payaccount_name}}
                        </td>
                        <td>
                            <!-- 付款行大额支付号 -->
                            {{item.c_sys_code}}
                        </td>
                        <td>
                            <!-- 收款行名称 -->
                            {{item.c_acc_bankname}}
                        </td>
                        <td>
                            <!-- 收款行账号 -->
                            {{item.c_acc_no}}
                        </td>
                        <td>
                            <!-- 收款行户名 -->
                            {{item.a_acc_name}}
                        </td>
                        <td>
                            <!-- 收款行地址 -->
                            {{item.c_acc_addr}}
                        </td>
                        <td>
                            <!-- 收款行大额支付号 -->
                            {{item.c_payaccount_sys}}
                        </td>
                        <td>
                            <!-- 用途 -->
                            {{item.c_usage}}
                        </td>
                        <td>
                            <div class="cell">
                                <button type="button" class="btn btn-primary" (click)="openCommonModal('update',item)">修改</button>
                                <button type="button" class="btn btn-warning" (click)="deleteAccountConfig(item)">删除</button>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <!--划款指令列表End-->
        <!--划款指令列表分页Begin-->
        <div class="box-footer clearfix">
            <app-pagination
                [currentPageNum]="pageInfo.currentPageNum"
                [pagesShow]="pageInfo.pagesShow"
                [totalPages]="pageInfo.totalPages"
                (pageChanged)="pageNavigation($event)">
                <div class="pull-left pagination-detail" data-pagination-additional="true">
                    <span class="pagination-info">
                        当前显示第{{pageInfo.startRow}}到第{{pageInfo.endRow}}条&nbsp;&nbsp;&nbsp;&nbsp;总共{{pageInfo.total}}条
                    </span>
                    <span class="page-list">
                        <span class="btn-group dropup">
                            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                                <span class="page-size">{{pageInfo.pageSize}}</span>
                                <span class="caret"></span>
                            </button>
                            <ul class="dropdown-menu" role="menu">
                                <li *ngFor="let i of pageInfo.pageList" role="menuitem"
                                    [class.active]="pageInfo.pageSize === i"
                                    (click)="pageSizeChange(i)">
                                <a href="javascript:void(0)">{{i}}</a>
                                </li>
                            </ul>
                        </span> 
                        条记录每一页
                    </span>
                </div>
            </app-pagination>
        </div>
        <!--划款指令列表分页End-->
    </div>
</div>
<!-- 修改/新增模态框开始 -->
<div class="modal fade" id="commonModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 *ngIf="type == 'add'" class="modal-title">添加账号</h4>
                <h4 *ngIf="type == 'update'" class="modal-title">修改账号</h4>
            </div>
            <div class="modal-body">
                <form class="form-inline">
                    <div class="row ext-from-item">
                        <label for="c_pay_type" class="col-sm-2">业务类型：</label>
                        <div class="col-sm-4">
                            <select class="form-control" [disabled]="type == 'update'" name="c_pay_type" [(ngModel)]="commonModalData.c_pay_type">
                                <option *ngFor="let item of commonModalSelectData" value="{{item.cHkCode}}">{{item.cHkName}}</option>
                            </select>
                        </div>
                    </div>
                    <div class="row ext-from-item">
                        <label for="c_fund_code" class="col-sm-2">基金代码：</label>
                        <div class="col-sm-4">
                            <input type="text" class="form-control" [disabled]="type == 'update'" name="c_fund_code" readonly [(ngModel)]="commonModalData.c_fund_code" (click)="openChooseFundModal(commonModalData)" />
                        </div>
                        <label for="vc_fund_name" class="col-sm-2">基金名称：</label>
                        <div class="col-sm-4">
                            <input type="text" class="form-control" [disabled]="type == 'update'" name="vc_fund_name" readonly [(ngModel)]="commonModalData.vc_fund_name"  />
                        </div>
                    </div>
                    <div class="row ext-from-item">
                        <label for="c_payaccount_bank" class="col-sm-2">付款行名称：</label>
                        <div class="col-sm-4">
                            <input type="text" class="form-control" name="c_payaccount_bank" [(ngModel)]="commonModalData.c_payaccount_bank" />
                        </div>
                        <label for="c_acc_bankname" class="col-sm-2">收款行名称：</label>
                        <div class="col-sm-4">
                            <input type="text" class="form-control" name="c_acc_bankname" [(ngModel)]="commonModalData.c_acc_bankname"/>
                        </div>
                    </div>
                    <div class="row ext-from-item">
                        <label for="c_payaccount" class="col-sm-2">付款行账号：</label>
                        <div class="col-sm-4">
                            <input type="text" class="form-control" name="c_payaccount" [(ngModel)]="commonModalData.c_payaccount" />
                        </div>
                        <label for="c_acc_no" class="col-sm-2">收款行账号：</label>
                        <div class="col-sm-4">
                            <input type="text" class="form-control" name="c_acc_no" id="c_acc_no" [(ngModel)]="commonModalData.c_acc_no" />
                        </div>
                    </div>
                    <div class="row ext-from-item">
                        <label for="c_payaccount_name" class="col-sm-2">付款行户名：</label>
                        <div class="col-sm-4">
                            <input type="text" class="form-control" name="c_payaccount_name" [(ngModel)]="commonModalData.c_payaccount_name" />
                        </div>
                        <label for="c_acc_name" class="col-sm-2">收款行户名：</label>
                        <div class="col-sm-4">
                            <input type="text" class="form-control" name="c_acc_name" id="c_acc_name" [(ngModel)]="commonModalData.c_acc_name" />
                        </div>
                    </div>
                    <div class="row ext-from-item">
                        <label for="c_sys_code" class="col-sm-2" style="padding-left: 0px;">收款行大额支付号：</label>
                        <div class="col-sm-4">
                            <input type="text" class="form-control" name="c_sys_code" [(ngModel)]="commonModalData.c_sys_code" />
                        </div>
                        <label for="c_payaccount_sys" class="col-sm-2" style="padding-left: 0px;">付款行大额支付号：</label>
                        <div class="col-sm-4">
                            <input type="text" class="form-control" name="c_payaccount_sys" [(ngModel)]="commonModalData.c_payaccount_sys" />
                        </div>
                    </div>
                    <div class="row">
                        <label for="c_acc_addr" class="col-sm-2">收款行地址：</label>
                        <div class="col-sm-10">
                            <input class="form-control" name="c_acc_addr" cols="30" rows="10" [(ngModel)]="commonModalData.c_acc_addr" />
                        </div>
                    </div>
                    <div class="row">
                        <label for="usage" class="col-sm-2">用途：</label>
                        <div class="col-sm-10">
                            <input class="form-control"  name="usage" cols="30" rows="10" [(ngModel)]="commonModalData.usage" />
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button *ngIf="type=='add'" type="button" class="btn btn-primary col-sm-2 col-sm-offset-4" data-dismiss="modal" (click)="addOrUpateAccountConfig()">新增</button>
                <button *ngIf="type=='update'" type="button" class="btn btn-primary col-sm-2 col-sm-offset-4" data-dismiss="modal" (click)="addOrUpateAccountConfig()">修改</button>
                <button type="button" class="btn btn-default col-sm-2" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>
<!-- 修改/新增模态框结束 -->
<!-- 基金选择模态框开始 -->
<div class="modal fade" id="chooseFundModal" tabindex="-1" role="dialog" aria-labelledby="新增">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">基金列表</h4>
            </div>
            <div class="modal-body">
                <!-- <form class="form-inline">
                    <div class="ext-from-item row">
                        <label class="col-sm-2" for="firstInput">基金代码：</label>
                        <div class="col-sm-3">
                            <input type="text" class="form-control" name="firstInput" id="firstInput" placeholder="基金代码" [(ngModel)]="modalFundSearch.c_fund_code">
                        </div>
                        
                        <label class="col-sm-2" for="secondInput">基金名称：</label>
                        <div class="col-sm-3">
                            <input type="text" class="form-control" name="secondInput" id="secondInput" placeholder="基金名称" [(ngModel)]="modalFundSearch.vc_fund_name">
                        </div>
                        <button class="btn btn-primary" (click)="searchFundList()">搜索</button>
                    </div>
                </form> -->
                <!-- 列表-->
                <div class="table-scroll-content">
                    <table class="table table-bordered table-keep-line table-hover table-striped pull-right align-center">
                        <tr>
                            <th>选择</th>
                            <th>基金代码</th>
                            <th>基金名称</th>
                        </tr>
                        <tr *ngFor="let item of modalFundData">
                            <td>
                                <!-- 选中 -->
                                <input type="radio" name="modalRadio" (click)="fundModalChecked(item,$event)">
                            </td>
                            <td>
                                <!-- 基金代码 -->
                                {{item.vc_fund_code}}
                            </td>
                            <td>
                                <!-- 基金名称 -->
                                {{item.vc_fund_name}}
                            </td>
                        </tr>
                    </table>
                </div>
                <!-- 列表 END-->
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary col-sm-2 col-sm-offset-4" (click)="confirmFund()">确定</button>
                <button type="button" class="btn btn-default col-sm-2" (click)="closeFundModal()">关闭</button>
            </div>
        </div>
    </div>
</div>
<!-- 基金选择模态框结束 -->